Wallet Connectors

NOTE: Wallet Connectors are available since @useDApp/core version 1.2.0.

By default activateBrowserWallet function connects to Metamask. But useDApp supports a set of other connectors you can use to connect to other wallets. The core package (@usedapp/core) is shipped with MetamaskConnector and CoinbaseWalletConnector. You can also install @usedapp/wallet-connect-connector package to use WalletConnectConnector and @usedapp/portis-connector for PortisConnector. To make use of connectors, you have to properly configure them in the useDApp config.

  import { Mainnet, MetamaskConnector, CoinbaseWalletConnector } from '@usedapp/core'
  import { WalletConnectConnector } from '@usedapp/wallet-connect-connector'
  import { PortisConnector } from '@usedapp/portis-connector'

  const PORTIS_DAPP_ID = 'e36dbbe4-d25d-4db2-bfa8-cb80eb87d1f0'

  const config: Config = {
    readOnlyChainId: Mainnet.chainId,
    readOnlyUrls,
    connectors: {
      metamask: new MetamaskConnector(),
      coinbase: new CoinbaseWalletConnector(),
      walletConnect: new WalletConnectConnector({ infuraId: 'd8df2cb7844e4a54ab0a782f608749dd' }),
      portis: new PortisConnector(PORTIS_DAPP_ID, 'mainnet'),
    },
  }

And then you can use them in your app:

  export function App() {
    const { activateBrowserWallet, account, deactivate } = useEthers()

    if (!account) {
      <div>
        <button onClick={() => activateBrowserWallet({ type: 'metamask' })}> Connect Metamask </button>
        <button onClick={() => activateBrowserWallet({ type: 'coinbase' })}> Connect Coinbase Wallet </button>
        <button onClick={() => activateBrowserWallet({ type: 'walletConnect' })}> Connect Wallet Connect </button>
        <button onClick={() => activateBrowserWallet({ type: 'portis' })}> Connect Portis </button>
      </div>
    }

    return (
      <div>
        <div>Account: {account}</div>
        <div>
          <button onClick={() => deactivate()}> Disconnect </button>
        </div>
      </div>
    )
  }

Please note that when creating connectors object in config you don't necessarily have to name them as provided in the example. That's only the name you can refer via to the specific connector in activateBrowserWallet function. The following is also valid:

  const config: Config = {
    readOnlyChainId: Mainnet.chainId,
    readOnlyUrls,
    connectors: {
      myWalletConnect: new WalletConnectConnector({ infuraId: 'd8df2cb7844e4a54ab0a782f608749dd' }),
    },
  }

And then in the app:

  export function App() {
    const { activateBrowserWallet, account, deactivate } = useEthers()

    if (!account) {
      <div>
        <button onClick={() => activateBrowserWallet({ type: 'myWalletConnect' })}> Connect </button>
      </div>
    }

    return (
      <div>
        <div>Account: {account}</div>
        <div>
          <button onClick={() => deactivate()}> Disconnect </button>
        </div>
      </div>
    )
  }

By default activateBrowserWallet looks for the connector which has tag metamask. The default value for connectors object in config is:

  const config: Config = {
    ...,
    connectors: {
      metamask: new MetamaskConnector(),
    },
  }

Example

App.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import {
  Mainnet,
  DAppProvider,
  Config,
  Arbitrum,
  Goerli,
  MetamaskConnector,
  CoinbaseWalletConnector,
  useEthers,
  useConnector,
} from '@usedapp/core'
import { getDefaultProvider } from 'ethers'
import { WalletConnectConnector } from '@usedapp/wallet-connect-connector'
import { PortisConnector } from '@usedapp/portis-connector'

const PORTIS_DAPP_ID = 'e36dbbe4-d25d-4db2-bfa8-cb80eb87d1f0'

const config: Config = {
  readOnlyChainId: Mainnet.chainId,
  readOnlyUrls: {
    [Mainnet.chainId]: getDefaultProvider('mainnet'),
    [Goerli.chainId]: getDefaultProvider('goerli'),
    [Arbitrum.chainId]: 'https://arb1.arbitrum.io/rpc',
  },
  connectors: {
    metamask: new MetamaskConnector(),
    walletConnect: new WalletConnectConnector({ infuraId: 'd8df2cb7844e4a54ab0a782f608749dd' }),
    coinbase: new CoinbaseWalletConnector(),
    portis: new PortisConnector(PORTIS_DAPP_ID, 'mainnet'),
  },
}

ReactDOM.render(
  <React.StrictMode>
    <DAppProvider config={config}>
      <App />
    </DAppProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

export function App() {
  const { connector, isLoading } = useConnector()
  const { activateBrowserWallet, account, chainId, deactivate } = useEthers()

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (!account) {
    return (
      <div className="button-grid">
        <button onClick={() => activateBrowserWallet({ type: 'metamask' })}> Connect Metamask </button>
        <button onClick={() => activateBrowserWallet({ type: 'coinbase' })}> Connect Coinbase Wallet </button>
        <button onClick={() => activateBrowserWallet({ type: 'walletConnect' })}> Connect Wallet Connect </button>
        <button onClick={() => activateBrowserWallet({ type: 'portis' })}> Connect Portis </button>
      </div>
    )
  }

  return (
    <div>
      <div>Account: {account}</div>
      <div>Chain id: {chainId}</div>
      <div>Connected with: {connector?.connector?.name ?? 'None'}</div>
      <div>
        <button onClick={() => deactivate()}> Disconnect </button>
      </div>
    </div>
  )
}